<template>
  <div class="info-wrap">
    <div class="flex-center">
      <Title title="更多运营信息" style="margin:6px 0 8px 0" font-size="16px"/>
      <editBtn v-if="hasRouteAuth('medium:dataEdit:otherInfo') && detailInfo.isEditAuth && isNewVersion" @handleClick="editModule"/>
    </div>
    <el-form
      :class="{'mobile-el-form': showMobilePage}"
      :label-position="showMobilePage?'left':'right'"
      label-width="110px"
      class="supplier-form height55">
      <el-row :gutter="20" :class="{'dividing': !showMobilePage}">
        <el-col :span="8">
          <el-form-item label="报价有效期：" style="margin-bottom: 0px;">
            <div v-if="detailInfo.morePriceInfo.priceTime.startTime || detailInfo.morePriceInfo.priceTime.endTime">
              {{ format(detailInfo.morePriceInfo.priceTime.startTime,'YYYY/MM/DD') }}-{{ format(detailInfo.morePriceInfo.priceTime.endTime,'YYYY/MM/DD') }}
            </div>
            <div v-else>--</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="支付方式：" style="margin-bottom: 0px;">
            <ToolTip :content="detailInfo.otherInfo.payMethod" />
          </el-form-item>
        </el-col>
        <el-col :span="8" class="label-collapse">
          <el-form-item label="主体名(即对方公司全称)：" style="margin-bottom: 0px;">
            <ToolTip :content="detailInfo.otherInfo.mainName" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="票面税点：" style="margin-bottom: 0px;">
            <ToolTip :content="detailInfo.otherInfo.taxPoint" unit="%"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="实际税点：" style="margin-bottom: 0px;">
            <ToolTip :content="detailInfo.otherInfo.actualTaxPoint" unit="%"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="所属机构：" style="margin-bottom: 0px;">
            <ToolTip :content="detailInfo.otherInfo.organization" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="商务联系人：" style="margin-bottom: 0px;">
            <ToolTip :content="detailInfo.otherInfo.businessContact" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="是否有效：" style="margin-bottom: 0px;">
            <ToolTip :content="detailInfo.otherInfo.status | statusFilter" />
          </el-form-item>
        </el-col>
        <el-col :span="24" class="no-border">
          <el-form-item label="备注 ：" style="margin-bottom: 0px;">
            <ToolTip :content="detailInfo.otherInfo.remarks && detailInfo.otherInfo.remarks.content" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="案例 ：" style="margin-bottom: 0px;">
            <caseColumn :data="detailInfo.otherInfo.cases"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import { mapState } from 'vuex';
import { format } from '@/filters/date';
import mixins from './mixins';
import caseColumn from '@/components/resource/table/caseColumn';
import Title from '@/components/Title';

export default {
  components: { caseColumn, Title },
  filters: {
    statusFilter(status) {
      const statusMap = {
        0: '否',
        1: '是'
      };
      return statusMap[status] || '--';
    }
  },
  mixins: [mixins],
  props: {
    detailInfo: {// 详情信息
      type: Object,
      default: () => {}
    }
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    })
  },
  methods: {
    format
  }
};
</script>
